<!DOCTYPE html>
<!--
     Any copyright is dedicated to the Public Domain.
     http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
  <title>CSS Reference</title>
  <style>
    div {
      border: 1px solid black;
      width:  50px;
      height: 30px;
      margin: 1px;
      float: left;
    }
    br { clear: both; }
  </style>
</head>
<body>
  <!-- Start point and end point are the same, in testcase:
       We end up detecting that the start & end have the same "y" value,
       so we render a gradient going from left to right horizontally. -->
  <div style="background: linear-gradient(to right,
                                          blue, yellow)"></div>
  <div style="background: linear-gradient(to right,
                                          blue, yellow)"></div>
  <div style="background: linear-gradient(to right,
                                          blue, yellow)"></div>
  <br>

  <!-- For the rest of the gradients here, we end up rendering a "legacy"
       gradient (-moz-linear-gradient) with the gradient line starting at the
       testcase's specified "start" point, and we ignore the "end" point. -->
  <div style="background: -moz-linear-gradient(center center,
                                               blue, yellow)"></div>
  <div style="background: -moz-linear-gradient(left top,
                                               blue, yellow)"></div>
  <div style="background: -moz-linear-gradient(10px 15px,
                                               blue, yellow)"></div>
  <br>

  <div style="background: -moz-linear-gradient(-10px -15px,
                                               blue, yellow)"></div>
  <div style="background: -moz-linear-gradient(-100px 10px,
                                               blue, yellow)"></div>
  <div style="background: -moz-linear-gradient(10px -100px,
                                               blue, yellow)"></div>
  <br>

  <div style="background: -moz-linear-gradient(center top,
                                               blue, yellow)"></div>
  <div style="background: -moz-linear-gradient(left center,
                                               blue, yellow)"></div>
  <div style="background: -moz-linear-gradient(right center,
                                               blue, yellow)"></div>
  <br>

  <div style="background: -moz-linear-gradient(right top,
                                               blue, yellow)"></div>
  <div style="background: -moz-linear-gradient(left top,
                                               blue, yellow)"></div>
  <div style="background: -moz-linear-gradient(left bottom,
                                               blue, yellow)"></div>
  <br>

</body>
</html>
